<template>
  <div class="xiaoxi">
    <mt-header class="yan" title="消息">
      <router-link to="/" slot="left">
     <img class="zuo_jian" src="../aimg/zuo.png" alt="" >
     </router-link>
    </mt-header>
    <div class="img_dzong">
      <div class="img_zong">
        <img class="img1" src="../aimg/hetong.png" alt="">
        <div>
          <p class="img1_p1">合同消息</p><br>
          <p class="img1_p2">推送更新通知,及时更新</p>    
        </div>
        <img class="you_jian" src="../aimg/you.png" alt="">
        <div class="border_bottom"></div>
      </div>

      <div class="img_zong">
        <img class="img1" src="../aimg/huodong.png" alt="">
          <div>
            <p class="img1_p1">活动消息</p><br>
            <p class="img1_p2">推送社区活动消息及公告</p>    
          </div>
        <img class="you_jian" src="../aimg/you.png" alt="">
        <div class="border_bottom"></div>
      </div>

      <div class="img_zong">
        <img class="img1" src="../aimg/zhangdan.png" alt="">
        <div>
          <p class="img1_p1">账单消息</p><br>
          <p class="img1_p2">推送账单信息,了解明显</p>    
        </div>
        <img class="you_jian" src="../aimg/you.png" alt="">
        <div class="border_bottom"></div>

      </div>

      <div class="img_zong">
        <img class="img1" src="../aimg/wuye.png" alt="">
        <div>
          <p class="img1_p1">物业报修</p><br>
          <p class="img1_p2">推送物业消息,公寓消息及时掌控</p>    
        </div>
        <img class="you_jian" src="../aimg/you.png" alt="">
        <div class="border_bottom"></div>
      </div>

      <div class="img_zong">
        <img class="img1" src="../aimg/tongzhi.png" alt="">
        <div>
          <p class="img1_p1">通知公告</p><br>
          <p class="img1_p2">掌握最新消息</p>    
        </div>
        <img class="you_jian" src="../aimg/you.png" alt="">
        <div class="border_bottom"></div>
      </div>

      <div class="img_zong">
        <img class="img1" src="../aimg/xuanpei.png" alt="">
        <div>
          <p class="img1_p1">选配包消息</p><br>
          <p class="img1_p2">推送最新的选配包相关消息</p>    
        </div>
        <img class="you_jian" src="../aimg/you.png" alt="">
        <div class="border_bottom"></div>
      </div>

      <div class="img_zong">
        <img class="img1" src="../aimg/paimai.png" alt="">
        <div>
          <p class="img1_p1">拍卖消息</p><br>
          <p class="img1_p2">推送拍卖消息,公寓消息及时掌握</p>    
        </div>
        <img class="you_jian" src="../aimg/you.png" alt="">
        <div class="border_bottom"></div>
      </div>

      <div class="img_zong">
        <img class="img1" src="../aimg/fuwu.png" alt="">
        <div>
          <p class="img1_p1">服务评价</p><br>
          <p class="img1_p2">推送最新的服务评价消息</p>    
        </div>
        <img class="you_jian" src="../aimg/you.png" alt="">
        <div class="border_bottom"></div>
      </div>

      <div class="img_zong">
        <img class="img1" src="../aimg/zhineng.png" alt="">
        <div>
          <p class="img1_p1">智能设备</p><br>
          <p class="img1_p2">推送智能设备相关消息</p>    
        </div>
        <img class="you_jian" src="../aimg/you.png" alt="">
      </div>

    </div>
    
      
    
  </div>
</template>
<style scoped>
.zuo_jian{
  width: 25px;height: 25px;
}
  .yan{
    background-color: white;
    color: black;
    font-size: 17px;
  }
  .img_zong{
    display: flex;
    margin-top: 18px;
    /* border-bottom: 1px solid #dbdada; */
  }
  .img1{
    width: 45px;height: 45px;
    margin-left: 29px;
    border-radius: 5px;
  }
  .img1_p1{
    margin-left: 20px;
    font-weight: 500;
    font-size: 15px;
  }
  .img1_p2{
    margin-left: 20px;
    font-size: 13px;
    color: #afaeae;
  }
  .you_jian{
    width: 30px;height: 30px;
    position: fixed;
    right: 12px;
  }
  .img2{
     width: 50px;height: 50px;
     margin-left: 30px;
  }
  .border_bottom{
    height: 1px;width: 100%;
    border-bottom: 1px solid rgb(243, 239, 239);
    position: fixed;
    margin-top: 52px;
  }
</style>